<template>
    <div class="basic-style">
        <div class="author-demo">
            <div>作者：陈炼</div>
            <div>日期：2017/11/02</div>
        </div>
        <!--L1上下式列表-->
        <h3 style="color:#f00;">L1上下式列表</h3>
        <div class="up-down" style="width: 540px;">
            <z-list-up-down  border-style="dashed">
                <div slot="zlst-list-up-left"><i class="iconfont icon-user-outline"></i>wuliu</div>
                <div slot="zlst-list-up-right">2017/02/12~2017/07/02</div>
                <div slot="zlst-list-down-left">角色：物流系统管理员</div>
                <div slot="zlst-list-down-right"><z-tag color="green">正常</z-tag></div>
            </z-list-up-down>
            <z-list-up-down>
                <div slot="zlst-list-up-left"><i class="iconfont icon-user-outline"></i>wuliu</div>
                <div slot="zlst-list-up-right">2017/02/12~2017/07/02</div>
                <div slot="zlst-list-down-left">角色：物流系统管理员</div>
                <div slot="zlst-list-down-right"> <z-tag color="yellow">到期</z-tag></div>
            </z-list-up-down>
            <z-list-up-down>
                <div slot="zlst-list-up-left"><i class="iconfont icon-user-outline"></i>wuliu</div>
                <div slot="zlst-list-up-right">2017/02/12~2017/07/02</div>
                <div slot="zlst-list-down-left">角色：物流系统管理员</div>
                <div slot="zlst-list-down-right"><z-tag color="red">禁用</z-tag></div>
            </z-list-up-down>
        </div>

        <h4>L1上下式列表html</h4>
        <p>循环列表时，循环z-list-up-down标签即可</p>
        <pre style="background-color: #ececec;margin-bottom:50px;">
            <code v-text="htmlCodeUpDownList">
            </code>
        </pre>
        <p style="color: #f00;">列表底部线条通过border-style属性可以设置实线（solid）或虚线(dashed），默认为虚线</p>
        <!--L2分类式列表-->
        <!--<h3 style="color:#f00;">L2分类式列表 </h3>
        <div class="classify-list">
            <div class="classify-list-container">
                <div class="classify-list-title">最近使用</div>
                <div class="classify-list-content">
                    <CheckboxGroup>
                        <Checkbox label="菜单1"></Checkbox>
                        <Checkbox label="菜单1"></Checkbox>
                        <Checkbox label="菜单1"></Checkbox>
                        <Checkbox label="菜单1菜单1"></Checkbox>
                        <Checkbox label="菜单1菜单1菜单1"></Checkbox>
                        <Checkbox label="菜单1"></Checkbox>
                        <Checkbox label="菜单1菜单1菜单1菜单1菜单1菜单1"></Checkbox>
                        <Checkbox label="菜单1"></Checkbox>
                        <Checkbox label="菜单1"></Checkbox>
                    </CheckboxGroup>
                </div>
            </div>
        </div>
        <h4>L2分类式列表html</h4>
        <pre style="background-color: #ececec;margin-bottom:50px;">
            <code v-text="htmlCodeClassifyList">
            </code>
        </pre>-->

    </div>
</template>
<script>
    export default{
        data () {
            return {
                htmlCodeUpDownList:'<z-list-up-down  border-style="dashed">\n' +
                '                <div slot="zlst-list-up-left">左上内容</div>\n' +
                '                <div slot="zlst-list-up-right">右上内容</div>\n' +
                '                <div slot="zlst-list-down-left">左下内容</div>\n' +
                '                <div slot="zlst-list-down-right">右下内容</div>\n' +
                '            </z-list-up-down>',
                htmlCodeClassifyList:'',
            }
        }
    }
</script>
